<template>
  <div class="d-flex flex-column justify-center align-center w-100 h-100">
    <div class="d-flex justify-center align-center">
      <v-hover v-slot="{ hover }">
        <v-sheet
          :elevation="hover ? 4 : 0"
          :color="hover ? 'thirdary' : 'primary'"
          :class="hover ? 'primary--text' : 'fontwhite--text'"
          width="100"
          height="100"
          class="rounded-circle d-flex justify-center align-center cur-point"
        >
          <i class="iconfont" style="font-size: 4rem">{{ icon }}</i>
        </v-sheet>
      </v-hover>

      <div class="d-inline-flex flex-column justify-center align-center ml-5">
        <div class="text-h5 mb-2">{{ mainTitle }}</div>
        <div class="primary--text text-h5">￥{{ price }}</div>
      </div>
    </div>
    <div class="mt-5 text-body-1">{{ describe }}</div>
  </div>
</template>



<script>
export default {
  props: {
    icon: String,
    mainTitle: String,
    price: Number,
    describe: String,
  },
};
</script>



<style lang="scss" scoped>
</style>
